<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>4-4盒式模型的宽高计算方法</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        #mark{
            width: 300px;
            height:100%;
            position: fixed;
            margin:auto;
            left: 0;
            right:0;
            padding-top: 4em;
            text-align: center;
            font-size: 1.5rem;
            font-weight: bold;
            text-shadow: #ffffff 2px 1px 3px;
            border:1px dashed red;
            border-top: none;
            border-bottom: none;
            color: #ff2700;
        }
        .box{
            width: 300px;
            padding: 30px;
            margin: 20px auto;
            border: 30px solid #fa0;
            background: #ff0;
        }
        #padding-box div{
            box-sizing: padding-box;/*好像浏览器很多不支持了*/
        }
        #border-box div{
            box-sizing: border-box;
        }
        #borderBoxLayout div{
            width:50%;
            box-sizing: border-box;
            float: left;
            /*display: inline-block;!*用这种方法布局，中间会有缝隙，所以50%就会把第二个挤下去*!*/
        }
        #borderBoxLayout div:nth-child(2){
            border-color: #00bc0d;
        }
    </style>
</head>
<body>
<div id="mark">虚线之间的宽度为300像素</div>
<h1>4-4对盒使用阴影</h1>
<h3>正常宽度不包括padding和border</h3>
<section id="normal">
    <div class="box">世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        这个div的width：300px；
    </div>
</section>

<h3>指定包括padding但不包括border的宽度（好像很多浏览器不支持了）</h3>
<code>box-sizing: padding-box;</code>
<section id="padding-box">
    <div class="box">世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        这个div的width：300px；
    </div>
</section>

<h3>指定包括padding和border的宽度</h3>
<code>box-sizing: border-box;</code>
<section id="border-box">
    <div class="box">世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        这个div的width：300px；
    </div>
</section>

<h3>用border-box进行布局</h3>
<code>   width:50%;
    box-sizing: border-box;
    float: left;</code>
<section id="borderBoxLayout">
    <div class="box">世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        这个div的width：300px；
    </div>
    <div class="box">世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理。 —— 斯里兰卡
        这个div的width：300px；
    </div>
</section>

</body>
</html>